<template>
    <div>
        <div id="l" class="carousel slide">
            <div class="carousel-indicators">
                <button
                    type="button"
                    data-bs-target="#l"
                    data-bs-slide-to="0"
                    class="active"
                    aria-current="true"
                    aria-label="Slide 1"
                ></button>
                <button
                    type="button"
                    data-bs-target="#l"
                    data-bs-slide-to="1"
                    aria-label="Slide 2"
                ></button>
                <button
                    type="button"
                    data-bs-target="#l"
                    data-bs-slide-to="2"
                    aria-label="Slide 3"
                ></button>
            </div>
            <div class="carousel-inner">
                <div
                    v-for="(item, index) in imglist"
                    :key="index"
                    :class="{active: index == 0}"
                    class="carousel-item"
                >
                    <img :src="item.url" class="d-block w-100" />
                </div>
            </div>
            <button
                class="carousel-control-prev"
                type="button"
                data-bs-target="#l"
                data-bs-slide="prev"
            >
                <span
                    class="carousel-control-prev-icon"
                    aria-hidden="true"
                ></span>
                <span class="visually-hidden">Previous</span>
            </button>
            <button
                class="carousel-control-next"
                type="button"
                data-bs-target="#l"
                data-bs-slide="next"
            >
                <span
                    class="carousel-control-next-icon"
                    aria-hidden="true"
                ></span>
                <span class="visually-hidden">Next</span>
            </button>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            imglist: [
                {
                    url: "https://zlsc.oss-cn-shenzhen.aliyuncs.com/upload/202306/n4.jpg",
                },
                {
                    url: "https://zlsc.oss-cn-shenzhen.aliyuncs.com/upload/202306/n1.png",
                },
                {
                    url: "https://zlsc.oss-cn-shenzhen.aliyuncs.com/upload/202306/n2.jpg",
                },
            ],
        }
    },
}
</script>

<style lang="scss" scoped></style>
